<template>
  <view class="scroll-view" v-if="messageShow" :class="!isShow?'hide-scroll-view':'show-scroll-view'">
    <view class="message-item zhanwei" :style="messageItemStyle"></view>
    <view class="message-item" :id="'message-item-'+index" v-for="(item,index) in messageList">
      <view class="message">
        <view class="user-img">
          <image mode="aspectFit" :src="item.avatar"></image>
        </view>
        <text class="text">{{ item.nickName }}加入了
          <text v-text="item.title"></text>
          话题圈，并评论话题
        </text>
        <text class="button" @click="toDetails(item.topicId,item.ctype)">查看</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      messageList: [],
      messageItemStyle: "",
      time: {},
      messageShow: true,
      scrollLeft: 0,
      isShow: true
    };
  },
  created() {
    this.initMessage()
  },
  methods: {
    show() {
      this.isShow = true
    },
    hide() {
      this.isShow = false
    },
    async initMessage() {
      clearTimeout(this.time)
      let {data} = await this.$javaCircle.doRequest("post", 'circle/customer/topic/getTips', '', '', false)
      this.messageList = data.data
      let num = this.messageList.length - 1
      if (num < 0) {
        return
      }
      let {left, width} = await this.getMessagItem(num)
      this.time = setInterval(() => {
        this.messageItemStyle = `margin-left: ${this.scrollLeft -= 30}px;`
        if ((left + width) < Math.abs(this.scrollLeft)) {
          this.messageShow = false
          clearInterval(this.time)
        }
      }, 300)
    },
    getMessagItem(num) {
      let index = 0
      const query = uni.createSelectorQuery().in(this);
      return new Promise((resolve, reject) => {
        let time = setInterval(() => {
          index++
          query.select('#message-item-' + num).boundingClientRect(data => {
            if (data) {
              if (index > 3) {
                clearInterval(time)
                return resolve({width: 100, left: 100})
              }
              clearInterval(time)
              return resolve(data)
            }
          }).exec();
        }, 1000)
      })
    },
    toDetails(id, ctype) {
      if (ctype === 1) {
        uni.navigateTo({url: "/pages/circle/details/details?id=" + id})
      } else {
        uni.navigateTo({url: "/pages/circle/circleOfFriends/details?id=" + id})
      }

    },
  },
}
</script>

<style lang="scss" scoped>
.scroll-view {
  width: 100%;
  height: 72upx;
  white-space: nowrap;
  position: sticky;
  //top: 0px;
  z-index: 10;
  overflow: hidden;
}

.message-item {
  width: fit-content;
  height: 100%;
  display: inline-block;
  background: linear-gradient(90deg, #A3FFC3 0%, #F4FFF7 100%);
  border-radius: 36upx;
  margin-right: 60upx;
  padding-right: 40upx;
}

.zhanwei {
  width: 1upx;
  height: 100%;
  margin-left: 0;
  transition: all .3s linear;
}

.message {
  display: flex;
  align-items: center;
}

.user-img {
  width: 72upx;
  height: 72upx;
  border-radius: 50%;
  background-color: #666666;
  margin-right: 10upx;

  image {
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }
}

.message-item .text {
  font-size: 32upx;
  color: #333;
  margin-right: 20upx;
}

.message-item .button {
  font-size: 32upx;
  color: #52A2FF;
  font-weight: 500;
  text-decoration: underline;
}
</style>
